<template>
    <div class="marketing_seckill_detail_info">
        <div class="info">
            <el-descriptions :column="3">
                <template #title>
                    <div class="title">
                        <div class="block"></div>
                        活动信息设置
                    </div>
                </template>
                <template #extra>
                    <el-button
                        type="primary"
                        v-auth="'seckill_list:edit'"
                        v-show="[1, 2].includes(data?.activityStatusName?.realStatus)"
                        @click="editHandler">
                        编辑
                    </el-button>
                </template>
                <el-descriptions-item label-class-name="label" class-name="content" label="活动名称：">
                    {{ data.name }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="label" class-name="content" label="开始时间：">
                    {{ data.activityStartTime }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="label" class-name="content" label="结束时间：">
                    {{ data.activityEndTime }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="label" class-name="content" label="每人限购：">
                    <span v-if="data.purchaseLimitNumber">{{ data.purchaseLimitNumber }}件</span>
                    <span v-else>不限购</span>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="label" class-name="content" label="订单取消：">
                    <span v-if="data.noPayTime"> 买家{{ data.noPayTime }}分钟未支付，订单自动取消 </span>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div>
            <div class="title">
                <div class="block"></div>
                活动商品
            </div>
            <div class="product">
                <img :src="data?.goods?.img" />
                <div class="product_right">
                    <div class="name">{{ data?.goods?.name }}</div>
                    <div class="price">
                        <div
                            v-if="
                                data?.goods?.goodsMinPrice && data?.goods?.goodsMinPrice === data?.goods?.goodsMaxPrice
                            ">
                            {{ floatDivide(data?.goods?.goodsMinPrice, 100) }}
                        </div>
                        <div
                            v-if="
                                data.goods?.goodsMinPrice && data?.goods?.goodsMinPrice !== data?.goods?.goodsMaxPrice
                            ">
                            {{ floatDivide(data?.goods?.goodsMinPrice, 100) }} ~
                            {{ floatDivide(data?.goods?.goodsMaxPrice, 100) }}
                        </div>
                    </div>
                    <div class="stock">库存{{ data?.goods?.stock }}</div>
                </div>
            </div>
            <el-table
                v-if="data.skuInfo?.length === 1"
                style="width: 800px"
                :data="data.skuInfo || []"
                :fit="false"
                stripe>
                <el-table-column prop="skuPrice" label="原价(元)" width="160">
                    <template v-slot="{ row }">
                        {{ floatDivide(row.skuPrice, 100) }}
                    </template>
                </el-table-column>
                <el-table-column prop="spikePrice" label="秒杀价(元)" width="160">
                    <template v-slot="{ row }">
                        {{ floatDivide(row.spikePrice, 100) }}
                    </template>
                </el-table-column>
                <el-table-column prop="skuStock" label="库存" width="160" />
                <el-table-column prop="spikeStockGoods" label="累计秒杀库存" width="160" />
                <el-table-column prop="spikeStockSurplus" label="当前秒杀库存" width="160" />
            </el-table>
            <el-table v-else style="width: 800px" :data="data.skuInfo || []" :fit="false" stripe>
                <el-table-column prop="specs" label="规格" width="210" />
                <el-table-column prop="skuPrice" label="原价(元)" width="110">
                    <template v-slot="{ row }">
                        {{ floatDivide(row.skuPrice, 100) }}
                    </template>
                </el-table-column>
                <el-table-column prop="spikePrice" label="秒杀价(元)" width="110">
                    <template v-slot="{ row }">
                        {{ floatDivide(row.spikePrice, 100) }}
                    </template>
                </el-table-column>
                <el-table-column prop="skuStock" label="库存" width="110" />
                <el-table-column prop="spikeStockGoods" label="累计秒杀库存" width="130" />
                <el-table-column prop="spikeStockSurplus" label="当前秒杀库存" width="130" />
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { floatDivide } from '@/commons/utils';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const props = defineProps({
    data: {
        default: () => {
            return {
                goodsTableData: [],
                goodsData: {}
            };
        },
        type: Object
    }
});

const editHandler = () => {
    router.push(`/marketing/seckill/edit?id=${route.query.id}`);
};
</script>

<style lang="scss" scoped>
.marketing_seckill_detail_info {
    .title {
        font-size: 14px;
        font-weight: 600;
        color: #33302d;
        line-height: 16px;
        .block {
            width: 4px;
            height: 16px;
            background: #ff6b00;
            display: inline-block;
            vertical-align: bottom;
        }
    }
    :deep(.label) {
        font-size: 14px;
        font-weight: 400;
        color: #969696;
        margin-right: 0;
    }
    :deep(.content) {
        color: #33302d;
        font-size: 14px;
    }

    .info {
        margin-bottom: 30px;
    }
    .product {
        margin: 16px 0;
        width: 800px;
        height: 76px;
        background: #fffaf9;
        padding: 8px;
        display: flex;
        box-sizing: border-box;
        img {
            width: 60px;
            height: 60px;
        }
        &_right {
            display: flex;
            margin-left: 8px;
            flex-direction: column;
            justify-content: space-between;
            font-size: 14px;
            font-weight: 400;
            .name {
                color: #33302d;
            }
            .price {
                color: #ff6b00;
            }
            .stock {
                color: #969696;
            }
        }
    }
}
</style>
